<!DOCTYPE html>
<html>
    <head>
        <title>UserInfoDisplay</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css">
        <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css">
        <link rel="shortcut icon" href="../IMG/favicon.ico"> 
    </head>
    <body>
        <div class="page-header">
            <h2>用户信息</h2>
        </div>
        <!-- 主体 -->
        <div class="main">
            <div class="form-group">
                <label class="attr-name"" for="UserID">工号</label>
                <p class="attr" id="UserID"></p>
            </div>
            <div class="form-group">
                <label class="attr-name" for="Name">姓名</label>
                <p class="attr" id="Name"></p>
            </div>
            <div class="form-group">
                <label class="attr-name" for="Email">电子邮箱</label>
                <p class="attr" id="Email"></p>
            </div>
            <div class="form-group">
                <label class="attr-name" for="Privilege">权限等级</label>
                <p class="attr" id="Privilege"></p>
            </div>
            <div class="form-group">
                <label class="attr-name" for="Workcell">所属部门</label>
                <p class="attr" id="Workcell"></p>
            </div>
            <div class="form-group">
                <label class="attr-name" for="LastLogin">最后登陆时间</label>
                <p class="attr" id="LastLogin"></p>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary" id="showEditModal">修改信息</button>
            </div>
        </div>

        <!-- 修改用户信息 -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改个人信息</h4>
                    </div>
                    <div class="modal-body" id="modal_body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <span class="help-block col-sm-offset-3">仅在需要修改的信息输入框中填写即可</span>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="modalUserID">工号</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="modalUserID" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="modalName">姓名</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="modalName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="newPassword">新密码</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="password" id="newPassword" placeholder="6-12位并且必须包含字母与数字" maxlength="12">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="rePassword">确认密码</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="password" id="rePassword" maxlength="12">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="newEmail">电子邮箱</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="email" id="newEmail">
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-primary center-block" id="EditBtn">确认修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="../JS/UserInfoDisplay.js"></script>
        <link href="../CSS/UserInfoDisplay.css" rel="stylesheet" type="text/css">
    </body>
</html>